<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <title>高级网页设计 - 李柃锋</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//lib.baomitu.com/mdui/0.4.1/css/mdui.css" rel="stylesheet">
    <link rel="stylesheet" href="css/prism.css">
    <link rel="stylesheet" href="css/page.css">
    <script src="//lib.baomitu.com/mdui/0.4.1/js/mdui.js"></script>
    <script src="js/prism.js"></script>
    <script src="js/page.js"></script>
</head>

<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-theme-layout-dark mdui-theme-primary-yellow mdui-theme-accent-pink">
    <header class="mdui-appbar mdui-appbar-fixed">
        <div class="mdui-toolbar mdui-color-theme">
            <span class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
            <a href="./" class="mdui-typo-headline">高级网页设计</a>
            <div class="mdui-toolbar-spacer"></div>
            <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
            <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>-->
            <!-- <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a> -->
            <a href="https://gitee.com/ifrank" target="_blank" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
                mdui-tooltip="{content: '我的码云'}">
                <svg class="mdui-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" style="widows: 1em; height: 1em; font-size: 24px;">
                    <path d="M978.404275 409.561604H455.061338c-25.117645 0-45.499734 20.382089-45.499734 45.499734l-0.031997 113.781333c0 25.117645 20.350092 45.499734 45.499734 45.531731h318.594132c25.117645 0 45.499734 20.382089 45.499734 45.499735v22.749867a136.5312 136.5312 0 0 1-136.5312 136.5312H250.248539a45.499734 45.499734 0 0 1-45.499734-45.499734V341.343999a136.5312 136.5312 0 0 1 136.5312-136.5312L978.308284 204.780802c25.117645 0 45.499734-20.350092 45.499734-45.467738L1023.904009 45.531731h0.031997A45.499734 45.499734 0 0 0 978.468269 0h-0.031997L341.343999 0.031997C152.84967 0.031997 0.031997 152.84967 0.031997 341.343999v637.092273c0 25.117645 20.382089 45.499734 45.499734 45.499734h671.233072a307.171203 307.171203 0 0 0 307.171203-307.171203v-261.671468c0-25.117645-20.382089-45.499734-45.499734-45.499734z"
                        fill="#ffffff"></path>
                </svg>
            </a>
        </div>
    </header>
    <div class="mdui-drawer mdui-shadow-3 mdui-hoverable" id="main-drawer">
        <div class="mdui-card">
            <div class="mdui-card-media">
                <img src="img/card.jpg" />
                <div class="mdui-card-media-covered">
                    <div class="mdui-card-primary">
                        <div class="mdui-card-primary-title">李柃锋</div>
                        <div class="mdui-card-primary-subtitle">#16110100410</div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
                <a href="./index.html" class="mdui-list-item-content">首页</a>
            </li>
            <li class="mdui-collapse-item mdui-collapse-item-open">
                <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">folder</i>
                    <div class="mdui-list-item-content">作业</div>
                    <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                </div>
                <ul class="mdui-collapse-item-body mdui-list mdui-list-dense" id="drawer-codelist">
                    <li class="mdui-list-item mdui-ripple" style="display:none">加载失败，刷新页面试试</li>
                </ul>
            </li>
            <li class="mdui-list-item mdui-ripple" mdui-tooltip="{position: 'bottom', content: '未完成的功能'}">
                <i class="mdui-list-item-icon mdui-icon material-icons">near_me</i>
                <div class="mdui-list-item-content">关于</div>
            </li>
        </ul>
        <script>
            initCodeDrawerList();
        </script>
    </div>
    <div id="page" class="mdui-p-y-4 mdui-shadow-3">
        <div id="page-description" class="mdui-container">
            <div class="mdui-typo">
                <h1 class="mdui-text-color-theme">代码演示</h1>
                <i class="mdui-icon material-icons mdui-text-color-theme">info</i>
                <p>打开菜单即可选择所有作品</p>
            </div>
        </div>
        <div class="mdui-divider"></div>
        <div id="page-demo" class="mdui-container">
            <h2><i class="mdui-icon material-icons mdui-text-color-theme">image</i> 示例图</h2>
            <img class="mdui-shadow-12 mdui-hoverable" src="codes/helloworld.png" alt="题目示例图">
            <h2><i class="mdui-icon material-icons mdui-text-color-theme">explore</i> 运行效果</h2>
            <div class="mdui-m-b-5">
                <iframe id="page-demo-iframe" onload="resizePageDemoIframe()" class="mdui-shadow-12 mdui-hoverable"
                    width="100%" src="codes/helloworld.html" frameborder="0" scrolling="auto" allowTransparency="false"
                    style="background-color: white;"></iframe>
                <a class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-float-right" href="codes/helloworld.html"
                    target="_blank">新页面打开</a>
            </div>
            <h2><i class="mdui-icon material-icons mdui-text-color-theme">code</i> 实现代码</h2>
            <pre data-src="codes/helloworld.html" class="mdui-shadow-12 mdui-hoverable line-numbers"></pre>
        </div>
    </div>
    <footer>
        <div class="footer-copyright">
            Copyright <i class="mdui-icon material-icons">copyright</i> 2018 By 李柃锋 #16110100410 | Build With <a href="https://www.mdui.org/">MDUI</a>
            And
            <i class="mdui-icon material-icons">favorite</i>
        </div>
    </footer>
</body>

</html>